<template>
    <div class="work-detail">
      <h2>{{ work.title }}</h2>
      <div v-if="work.type === '图片'">
        <el-carousel height="300px">
          <el-carousel-item v-for="image in work.file" :key="image">
            <el-image :src="image" style="width: 100%; height: 300px;"></el-image>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div v-if="work.type === '视频'">
        <video width="100%" height="300px" style="object-fit: cover;" controls>
          <source :src="work.file[0]" type="video/mp4">
        </video>
      </div>
      <p>{{ work.textContent }}</p>
      <div class="info">
        <div>作者：{{ work.authorName }}</div>
        <div>喜欢数：{{ work.likesCount }}</div>
      </div>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  import UserWordsSubmit from "@/views/component/UserWordsSubmit";
  import UserWorks from "@/api/UserWorks";
  import UserLike from "@/api/UserLike";
  export default {
    data() {
      return {
        work: {}
      };
    },
    created() {
      // 从路由参数中获取作品 ID，然后根据 ID 从 API 获取作品详细信息
      const workId = this.$route.params.id;
      // 假设你有一个 API 方法用于获取作品详细信息
      // 这里需要根据你的实际 API 进行调整
      // 例如：import UserWorks from "@/api/UserWorks";
      // UserWorks.getWorkDetail(workId).then(res => {
      //   this.work = res.data.data;
      // });
    }
  };
  </script>
  
  <style scoped>
  .work-detail {
    padding: 20px;
  }
  .info {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
  }
  </style>